<template>
	<div class="main">
		<el-card shadow="never" class="card">
			<el-steps :active="active" finish-status="success">
				<el-step title="待付款"></el-step>
				<el-step title="待发货"></el-step>
				<el-step title="已发货"></el-step>
				<el-step title="已完成"></el-step>
				<el-step title="已关闭"></el-step>
			</el-steps>
		</el-card>
		<el-card shadow="never" class="card">
			<!-- 第一页 -->
			<div class="card-item1">
				<span class="item1-line1"></span>
				订单信息:{{orderBase.status==0?'待付款':''||orderBase.status==1?'待发货':''||orderBase.status==2?'已发货':''||orderBase.status==3?'已完成':''||orderBase.status==4?'已关闭':''||orderBase.status==5?'无效订单':''}}
				<div class="card-item1-box">
					<div class="card-box1">
						<div>订单金额:{{orderBase.totalAmount}}</div>
						<div>下单时间:{{orderBase.modifyTime}}</div>
					</div>
					<div class="card-box">
						<div>订单编号:{{orderBase.orderSn}}</div>
						<div>付款时间:{{orderBase.createTime}}</div>
					</div>
					<div class="card-box">
						<div>用户账号:{{orderBase.memberUsername}}</div>
						<div>发货时间:{{orderBase.modifyTime}}</div>
					</div>
					<div class="card-box">
						<div>备注:{{orderBase.totalAmount}}</div>
						<div>收货时间:</div>
					</div>
				</div>
				<span class="item1-line1"></span>
				收货人信息:
				<div class="card-item1-box">
					<div class="card-box1">
						<div>收货人:{{orderBase.receiverName}}</div>
						<div>地址:{{orderBase.receiverProvince+orderBase.receiverCity}}</div>
					</div>
					<div class="card-box">
						<div>用户姓名:{{orderBase.memberUsername}}</div>
						<div>详细地址:{{orderBase.receiverDetailAddress}}</div>
					</div>
					<div class="card-box">
						<div>手机号码:{{orderBase.receiverPhone}}</div>

					</div>
					<div class="card-box">
						<div>邮政编码:{{orderBase.receiverPostCode}}</div>

					</div>
				</div>
				<span class="item1-line1"></span>
				商品信息:
				<el-table :data="orderItems" stripe style="width: 100%" border>
					<el-table-column prop="productName" label="商品名称" width="100">

					</el-table-column>
					<el-table-column label="商品图片" width="100">
						<template slot-scope="scope">
							<img :src="scope.row.productPic" alt="" style="width: 100px;height: 100px;">
						</template>
					</el-table-column>
					<el-table-column label="是否退货" width="100">
						<template slot-scope="scope">
							<span>{{scope.row.isReturn ==0?'否':'是'}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="productBrand" label="品牌" width="100">

					</el-table-column>
					<el-table-column prop="productPrice" label="价格" width="100">

					</el-table-column>
					<el-table-column prop="productQuantity" label="商品数量" width="100">

					</el-table-column>
					<el-table-column prop="realAmount" label="小计" width="100">

					</el-table-column>
				</el-table>
				费用信息:
				<div class="bottom">
					<span class="bottom-item1">运费金额:0</span>
					<span>订单总金额:{{orderBase.totalAmount}}</span>
					<span>实际金额:</span>
					<span> 促销优化金额0</span>
				</div>
				<div v-show="active == 2" style="margin-top: 40px;">
					物流公司: <el-select v-model="deliveryCompany" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
					快递单号:<el-input v-model="deliverySn" placeholder="请输入内容" style="width: 200px;"></el-input>

				</div>
				<el-button v-show="active == 2" style="margin-top: 60px;margin-left: 40%;" type="primary" @click="ok">
					确认发货</el-button>
			</div>
			<div>	
			<span class="item1-line1"></span>
			<div style="margin-top: 40px;" v-show="active == 3||active ==4||active ==5">物流信息:  {{orderBase.deliveryCompany}}  [{{orderBase.deliverySn}}]
			<div>
				 <el-table
				      :data="tableData"
				      style="width: 100%">
				      <el-table-column
					  align="center"
				        prop="date"
				        label="日期"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="state"
				        label="状态"
				        width="180">
				      </el-table-column>
				      <el-table-column
				        prop="remarks"
				        label="备注">
				      </el-table-column>
				    </el-table>
			</div>
			 <el-button type="primary" style="margin-left:40%;" v-show="active == 4" @click="offOrder">关闭订单</el-button>
			 <el-button type="primary" style="margin-left:40%;" v-show="active == 3"  @click="constraintOk">强制确认发货</el-button>
			  <el-button type="primary" style="margin-left:40%;" v-show="constraint"  @click="constraintOk">强制确认发货</el-button>
			
			</div>
			
			
			
			</div>

		</el-card>
	</div>
</template>

<script>
	import {
		sendDone,
		orderDetail,
		finishOrder,
		receiveProductsForce
	} from "@/api/order/list/index.js"
	export default {
		data() {
			return {
				constraint:false,
				active: 1,
				id: "",
				ids:"",
				orderIds:"",
				orderItems: [],
				orderBase: {},
				orderId:"",
				options: [{
						value: '顺丰快递',
						label: '顺丰快递'
					}, {
						value: '圆通快递',
						label: '圆通快递'
					}, {
						value: '曹操快递',
						label: '曹操快递'
					}, {
						value: '中国邮政',
						label: '中国邮政'
					},
					{
						value: '中通快递',
						label: '中通快递'
					},
					{
						value: '韵达快递',
						label: '韵达快递'
					},
					{
						value: '中铁物流',
						label: '中铁物流'
					}, {
						value: '德邦物流',
						label: '德邦物流'
					}
				],
				
					deliveryCompany: '',
					deliverySn:"",
					orderId:"",
					  tableData: [{
					            date: '2016-05-02',
					            state: '深圳市横岗速递营销部已收件',
					            remarks: '揽投员姓名：钟定基;联系电话：13883838888'
					          }, {
					            date: '2016-05-04',
					            state: '离开深圳市 发往广州市',
					            remarks: ''
					          }, {
					            date: '2016-05-01',
					            state: '到达广东速递物流公司广航中心处理中心（经转）',
					            remarks: ''
					          }, {
					            date: '2016-05-03',
					            state: '离开广州市 发往北京市（经转）',
					            remarks: ''
					          }]
				
				
			}
		},

		methods: {
			// 强制发货
			constraintOk(){
				receiveProductsForce(this.orderId).then(res=>{
					console.log(res)
					if(res.success){
						this.active = 4
						
					}
				})
			},
			//关闭订单
			offOrder(){
				finishOrder(this.orderId).then(res=>{
					console.log(res)
					if(res.success){
						this.active = 5
						this.getOrderDetail()
					}
				})
			},
			// 点击确认
			ok() {
           this.orderBase.deliveryCompany=this.deliveryCompany
		   this.orderBase={...this.orderBase}
		   this.orderBase.deliverySn =this.deliverySn
		   this.orderBase.orderId =this.orderId
		   sendDone(this.orderBase).then(res=>{
			   console.log(res)
			   if(res.success){
				   this.active = 3
			   }
		   })
		    
			},
			// 获取订单明细
			getOrderDetail(){
				orderDetail(this.id).then(res => {
					console.log(res)
					this.orderItems = res.data.orderDetail.orderItems
					// this.obj.orderId = this.orderItems.forEach(ele=>{
					// 	return ele.orderId
					// })
					this.orderId =res.data.orderDetail.orderItems[0].orderId
					
					
					this.orderBase = res.data.orderDetail.orderBase
					// this.obj.orderId =res.data.orderDetail.orderBase.orderSn
					 // this.active = this.orderBase.status 
					if (this.orderBase.status == 1) {
				
						this.active = 2
					}
					if (this.orderBase.status == 2) {
				
						this.active = 3
					}
					if (this.orderBase.status == 3) {
					
						this.active = 4
					}
					if (this.orderBase.status == 4) {
					
						this.active = 5
					}
					if (this.orderBase.status == 5) {
					
						this.active = 5
					}
				})
			}
		},
		created() {
			this.id = this.$route.params.id
			console.log(this.$route.query.id)
			this.ids =this.$route.query.id
			// if(this.ids){
			// 	this.constraint =true
			// }
			if(this.ids){
				orderDetail(this.ids).then(res => {
					console.log(res)
					this.orderItems = res.data.orderDetail.orderItems
					// this.obj.orderId = this.orderItems.forEach(ele=>{
					// 	return ele.orderId
					// })
					this.orderId =res.data.orderDetail.orderItems[0].orderId
					
					
					this.orderBase = res.data.orderDetail.orderBase
					// this.obj.orderId =res.data.orderDetail.orderBase.orderSn
					 // this.active = this.orderBase.status 
					if (this.orderBase.status == 1) {
				
						this.active = 2
					}
					if (this.orderBase.status == 2) {
				
						this.active = 3
					}
					if (this.orderBase.status == 3) {
					
						this.active = 4
					}
					if (this.orderBase.status == 4) {
					
						this.active = 5
					}
					if (this.orderBase.status == 5) {
					
						this.active = 5
					}
					
				})
			}else{
				this.getOrderDetail()
			}
          

			
			

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.logistics{
		margin-top: 40px;
	}
	.main {
		.card {
			margin: 20px;

			.card-item1 {
				.bottom {
					.bottom-item1 {
						margin-left: 0;
					}

					margin-top: 40px;

					span {
						margin-left: 40px;
					}
				}

				.card-item1-box {
					display: flex;
					margin-top: 30px;

					.card-box1 {
						div {
							margin-bottom: 20px;
						}

					}

					.card-box {
						margin-left: 40px;

						div {
							margin-bottom: 20px;
						}
					}
				}

				.item1-line1 {
					width: 100%;
					height: 1px;
					background-color: #007F7F;
					display: block;
					margin: 10px 0;
				}
			}
		}
	}
</style>
